<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container mt-3">
			<!-- 轮播图 -->
			<div class="carousel slide" id="mycarousel" data-ride="carousel">
				<!-- 指示图标区 -->
				<ol class="carousel-indicators">
					<li data-slide-to="0" data-target="#mycarousel"></li>
					<li data-slide-to="1" data-target="#mycarousel"></li>
					<li data-slide-to="2" data-target="#mycarousel"></li>
					<li data-slide-to="3" data-target="#mycarousel"></li>
				</ol>
				<!-- 轮播图片区 -->
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="image/slight-1.jpg" class="w-100">
						<p class="carousel-caption">轮播图文字1</p>
					</div>
					<div class="carousel-item">
						<img src="image/slight-2.jpg" class="w-100">
						<p class="carousel-caption">轮播图文字2</p>
					</div>
					<div class="carousel-item">
						<img src="image/slight-3.jpg" class="w-100">
						<p class="carousel-caption">轮播图文字3</p>
					</div>
					<div class="carousel-item">
						<img src="image/slight-4.jpg" class="w-100">
						<p class="carousel-caption">轮播图文字4</p>
						
						
					</div>
				</div>
				<!-- 轮播按钮控制区 -->
				<a href="#mycarousel" class="carousel-control-prev" data-slide="prev">
					<span class="carousel-control-prev-icon"></span>
				</a>
				<a href="#mycarousel" class="carousel-control-next" data-slide="next">
					<span class="carousel-control-next-icon"></span>
				</a>
			</div>
		</div>
	</body>
</html>
